<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的粉丝</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/reachbottom.js"></script>
    <style>
        .top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 200;
            background: #F6F6F9
        }

        .label {
            line-height: 2em;
            height: 2em;
            padding: 0 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body ontouchstart>
    <div class="top">
        <header class='weui-header'>
            <div class="weui-search-bar" id="searchBar">
                <form id="searchForm" class="weui-search-bar__form" action="JavaScript：return true;">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" confirm-type="search" class="weui-search-bar__input" id="searchInput"
                            placeholder="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText"
                        style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                        <i class="weui-icon-search"></i>
                        <span></span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
        </header>
    </div>
    <div style="height: 50px;"></div>
    <div class="list">
        <div class="weui-cells" id="list">

        </div>
    </div>
</body>

</html>
<script id="listtemp" type="text/html">
    {{each list item}}
     <div class="weui-cell ">
                <div class="weui-cell__hd"><img
                        src="{{item.UserImg}}"
                        alt="" style="width:40px;height: 40px;border-radius:50%; margin-right:5px;display:block"></div>
                <div class="weui-cell__bd weui-cell_primary">
                    <p>{{item.NickName}}</p>
                </div>
                <span class="weui-cell__ft">
                    {{if(item.UserId!=userId)}}
                        {{if(bloggerUserId==userId)}}
                            {{if(item.IsConcern==1)}}
                            <label data-item="{{item}}" class="label f-white bg-green followicon">互相关注</label>
                            {{else}}
                            <label data-item="{{item}}" class="label f-gray b-green followicon">回粉</label>
                            {{/if}}
                        {{else}}
                            {{if(item.IsConcern==1)}}
                            <label data-item="{{item}}" class="label f-white bg-green followicon">已关注</label>
                            {{else}}
                            <label data-item="{{item}}" class="label f-gray b-green followicon">关注</label>
                            {{/if}}
                        {{/if}}
                    {{/if}}
                </span>
            </div>
            {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            bloggerlist: [],
            page: 1,
            limit: 10,
            hasmore: true,
            searchkey: '',
            bloggerUserId: '',
            bloggerId: 0,
            nickName: '',
            userId: "",
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.initevent();
            self.data.bloggerUserId = lobsterh5.GetUrlParam("bloggerUserId");
            self.data.bloggerId = lobsterh5.GetUrlParam("bloggerId");
            self.data.nickName = lobsterh5.GetUrlParam("nickName", decodeURIComponent(location.href));
            self.data.userId = localStorage.getItem("userId");
            if (self.data.userId != self.data.bloggerUserId) {
                $("title").text(self.data.nickName + "的粉丝")
            }
            self.getFansList();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#searchForm").on('submit', function (event) {
                //拦截表单默认提交事件
                event.preventDefault();
                self.data.searchkey = $('#searchInput').val();
                self.data.page = 1;
                self.data.hasmore = true;
                $("#list").html("");
                self.getFansList();
            })
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    self.getFansList();
                }
            })
            $("#list").on("click", ".followicon", function () {
                var _this = $(this);
                var txt = _this.text();
                var item = _this.data("item");
                var isconcern = txt == "已关注" ? 0 : 1;
                var userId = localStorage.getItem("userId");//登录用户Id
                var bloggerUserId = self.data.bloggerUserId;
                if (bloggerUserId == userId) {//查看我的关注
                    isconcern = txt == "互相关注" ? 0 : 1;
                }
                lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.FollowBlogger", {
                    BloggerId: item.BloggerId,
                    IsConcern: isconcern,
                    ConcernUserId: item.UserId,
                    UserId: userId
                }).then(res => {
                    if (bloggerUserId != userId) {
                        $.toast(txt == "已关注" ? '取消成功' : '关注成功', 'text');
                        if (txt == "已关注") {
                            _this.removeClass("f-white").removeClass("bg-green").addClass("f-gray").addClass("b-green");
                            _this.text("关注");
                        }
                        else {
                            _this.addClass("f-white").addClass("bg-green").removeClass("f-gray").removeClass("b-green");
                            _this.text("已关注");
                        }
                    } else {
                        $.toast(txt == "互相关注" ? '取消成功' : '关注成功', 'text');
                        if (txt == "互相关注") {
                            _this.removeClass("f-white").removeClass("bg-green").addClass("f-gray").addClass("b-green");
                            _this.text("回粉");
                        }
                        else {
                            _this.addClass("f-white").addClass("bg-green").removeClass("f-gray").removeClass("b-green");
                            _this.text("互相关注");
                        }
                    }
                }).catch(res => {
                    $.toast(res.msg || res, 'forbidden');
                })
            })
        },
        getFansList() {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetFansList", {
                page: self.data.page,
                limit: self.data.limit,
                bloggerUserId: self.data.bloggerUserId,
                userId: localStorage.getItem("userId"),
                searchkey: $('#searchInput').val(),
            }).then(res => {
                var appendhtml = template("listtemp", {
                    userId: localStorage.getItem("userId"),
                    list: res, bloggerUserId: self.data.bloggerUserId
                });
                $("#list").html(appendhtml);
                if (res.length < self.data.limit) {
                    self.data.hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.page++;
                }
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        }
    }); 
</script>